<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1101876_uldrklohrw.css">
    <link rel="stylesheet" href="../css/cropper.min.css">
    <link rel="stylesheet" href="../css/ImgCropping.css">
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/cropper.min.js"></script>
    <link rel="stylesheet" href="../css/personal.css">
    <link rel="stylesheet" href="../css/xmMaster_Edition.css">
    <script src="../js/xmMaster_Editionjs.js"></script>


</head>
<body>
<script src="./../js/xmMaster_Edition.js"></script>
<script src="./../js/xmMaster_Editionleft.js"></script>
<div id="psn_box">
    <div id="psn">
        <h3>个人中心</h3>
        <ul>
            <li id="li_pic"><div  id="psn_pic">
                <img id="finalImg" src="" width="100%">
            </div>
               <div id="psn_pic_btn">
                   <button id="replaceImg" class="l-btn">更换</button>
                   <div>支持jpg、gif、png、或bmp格式的图片，文件必须小于1M</div></div>
            </li>
            <li>
            <span class="FIn">*</span><span class="OP">用户名</span><span>xxxx</span>
            </li>
            <li>
                <span class="FIn">*</span><span class="OP" >昵称</span><input type="text"id="neckname">
            </li>
            <li>
                <span class="FIn">*</span><span class="OP">QQ</span><input type="text" placeholder="请输入QQ" id="qq">
            </li>
        </ul>
        <button id="psn_btn">提交</button>
    </div>
</div>




<!--图片裁剪框 start-->
<div style="display: none" class="tailoring-container">
    <div class="black-cloth" onclick="closeTailor(this)"></div>
    <div class="tailoring-content">
        <div class="tailoring-content-one">
            <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
                选择图片
            </label>
            <div class="close-tailoring"  onclick="closeTailor(this)">×</div>
        </div>
        <div class="tailoring-content-two">
            <div class="tailoring-box-parcel">
                <img id="tailoringImg">
            </div>
            <div class="preview-box-parcel">
                <p>图片预览：</p>
                <div class="square previewImg"></div>
                <div class="circular previewImg"></div>
            </div>
        </div>
        <div class="tailoring-content-three">
            <button class="l-btn cropper-reset-btn">复位</button>
            <button class="l-btn cropper-rotate-btn">旋转</button>
            <button class="l-btn cropper-scaleX-btn">换向</button>
            <button class="l-btn sureCut" id="sureCut">确定</button>
        </div>
    </div>
</div>
</body>
<script src="../js/personal.js"></script>
</html>